<template>
  <div class="home-container">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <van-search
        v-model="searchText"
        placeholder="搜索商品"
        shape="round"
        background="#1989fa"
        @search="onSearch"
      />
      <div class="user-info" @click="goToMine">
        <van-icon name="user-o" size="20" color="#fff" />
        <span class="points" v-if="userStore.isLoggedIn">{{ userStore.userInfo?.points || 0 }}积分</span>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="swiper-container">
      <van-swipe :autoplay="3000" indicator-color="white" :show-indicators="true" :loop="true">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img :src="item.image" class="banner-img" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 功能导航 -->
    <div class="nav-section">
      <div class="nav-item" @click="router.push('/product')">
        <van-icon name="shop-o" size="30" color="#1989fa" />
        <span>全部商品</span>
      </div>
      <div class="nav-item" @click="router.push('/order')">
        <van-icon name="orders-o" size="30" color="#ff6034" />
        <span>我的订单</span>
      </div>
      <div class="nav-item" @click="router.push('/cart')">
        <van-icon name="cart-o" size="30" color="#07c160" />
        <span>购物车</span>
      </div>
      <div class="nav-item" @click="router.push('/mine')">
        <van-icon name="user-o" size="30" color="#ee0a24" />
        <span>个人中心</span>
      </div>
    </div>

    <!-- 热门商品 -->
    <div class="section-title">热门推荐</div>
    <div class="product-list">
      <div
        class="product-card"
        v-for="product in hotProducts"
        :key="product.id"
        @click="goToProductDetail(product.id)"
      >
        <img :src="product.image" class="product-img" />
        <div class="product-info">
          <div class="product-name">{{ product.name }}</div>
          <div class="product-price">{{ product.price }} 积分</div>
        </div>
      </div>
    </div>

    <!-- 加载更多 -->
    <div class="load-more" v-if="hotProducts.length > 0">
      <van-button type="primary" size="small" @click="loadMoreProducts">查看更多商品</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getProductList } from '@/api/product'

const router = useRouter()
const userStore = useUserStore()

// 搜索相关
const searchText = ref('')
const onSearch = () => {
  router.push({
    path: '/product',
    query: { keyword: searchText.value },
  })
}

// 轮播图数据
const banners = ref([
  { image: 'https://img01.yzcdn.cn/vant/apple-1.jpg' },
  { image: 'https://img01.yzcdn.cn/vant/apple-2.jpg' },
  { image: 'https://img01.yzcdn.cn/vant/apple-3.jpg' },
])

// 热门商品
const hotProducts = ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(10)

// 获取热门商品
const fetchHotProducts = async () => {
  try {
    const res = await getProductList({
      page: currentPage.value,
      limit: pageSize.value,
      status: '在售',
    })

    if (res.code === 200 && res.data && res.data.list) {
      hotProducts.value = res.data.list.map((item: any) => ({
        id: item.id,
        name: item.name,
        price: item.price,
        image: item.image || 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      }))
    }
  } catch (error) {
    console.error('获取热门商品失败:', error)
  }
}

// 加载更多商品
const loadMoreProducts = () => {
  router.push('/product')
}

// 跳转到商品详情
const goToProductDetail = (id: number) => {
  router.push(`/product/${id}`)
}

// 跳转到个人中心
const goToMine = () => {
  router.push('/mine')
}

onMounted(() => {
  fetchHotProducts()
})
</script>

<style scoped lang="scss">
.home-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 50px;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: $primary-color;
  padding: $padding-xs;

  :deep(.van-search) {
    flex: 1;
    background-color: transparent !important;
    padding: 8px 0;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: $padding-xs;
    margin-right: $padding-xs;

    .points {
      color: white;
      font-size: $font-size-xs;
      margin-top: 2px;
    }
  }
}

.swiper-container {
  border-radius: 0 0 $border-radius-md $border-radius-md;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  .banner-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
}

.nav-section {
  display: flex;
  justify-content: space-around;
  margin: $padding-md 0;
  padding: $padding-md;
  background-color: $white;
  border-radius: $border-radius-md;

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      margin-top: $padding-xs;
      font-size: $font-size-sm;
      color: $text-color;
    }
  }
}

.section-title {
  padding: $padding-md;
  font-size: $font-size-lg;
  font-weight: 500;
  color: $text-color;
  margin-top: $padding-md;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $padding-xs;
  padding: 0 $padding-xs;

  .product-card {
    background-color: $white;
    border-radius: $border-radius-md;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    .product-img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }

    .product-info {
      padding: $padding-xs;

      .product-name {
        font-size: $font-size-md;
        color: $text-color;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .product-price {
        font-size: $font-size-md;
        color: $primary-color;
        font-weight: 500;
        margin-top: $padding-xs;
      }
    }
  }
}

.load-more {
  display: flex;
  justify-content: center;
  margin: $padding-md 0;
}
</style> 